<template>
  <div class="modal" v-if="value">
    <div class="alert dialog-wrap" :style="dynamic_style">
      <div class="dialog-title">
        <img src="@/assets/images/ico.gif" alt="" class="title-logo">
        <span class="title-text">{{title || item.title_text}}</span>
        <div class="title-right logo-close" :title="$t('tip.close')" @click="close">X</div>
      </div>
      <div class="dialog-main alert-content">
        <div v-if="type=='alert'">
          <img src="@/assets/images/alert.gif" style="margin-right: 10px;" />
          <div class="content-area">{{ msg }}</div>
        </div>
        <slot></slot>
        <div v-if="type=='confirm'" class="flex-oneline">
          <div class="text-center confirm-text">{{ msg }}</div>
          <div class="text-center">
            <!-- 父组件监听confirm事件 -->
            <div class="btn btn-gray" @click="$emit('confirm', true)">{{$t('btn.confirm')}}</div>
            <div class="btn btn-gray" @click="$emit('confirm', false)">{{$t('btn.cancel')}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import Vue from 'vue'
  import i18n from '@/assets/lang' // 语言包对象
  export default {
    data(){
      return {
        m: 'm'
      }
    },
    props: {
      type: {
        default: 'alert',
      },
      item: {
        // Props with type Object/Array must use a
        // factory function to return the default value.
        default: () => {
          return {
            title_text: i18n.t('dialog.alert.title_text'),
            close_tip: i18n.t('dialog.alert.close_tip'),
          }
        }
      },
      // 标题 头部
      title: {default: false,},
      // 显示的内容信息
      msg: {},
      // 双向绑定
      value: {},
    },
    computed: {
      //  动态渲染组件样式
      dynamic_style(){
        if(this.type=='large'){
          return {
            width: '700px',
          }
        }
      }
    },
    methods: {
      close(){
        this.$emit('input', false)
      }
    }

  }
</script>

<style lang="scss" scoped>
  .alert{
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .x-head{
      background-color: #f6f6f6;
      height: 32px;
      line-height: 32px;
      border-bottom: 1px solid #ddd;
      justify-content: space-between;
    }
    .x-right{
      margin-right: 6px;
      cursor: pointer;
      width: 24px;
      text-align: center;
      font: bold 14px/32px verdana,Arial;
      color: #336699;
      transition: font-size .25s ease;
      &:hover{
        font-size: 18px;
      }
    }
  }
</style>
